<template>
	<view>
		<!-- <view class="progress-box" v-for="(item,index) in list">
			<uv-line-progress class="item-box" height="10" v-if="item.show" :percentage="item.percentage"
				activeColor="#007aff"></uv-line-progress>
		</view> -->
		<view class="downlaod-box">
			<view class="download-item-box" v-for="item in downloadInfo" :key="item.index">
				<view class="item-box image-index">
					<uv-text :text="`图片 ${item.index}`" :lineHeight="20" size="10" color="#00aaff"
						align="center"></uv-text>
				</view>
				<view class="item-box">
					<uv-text v-if="item.percentage==100" prefixIcon="checkmark-circle-fill"
						:iconStyle="{color:'#00ff00'}" text="下载完成" :lineHeight="20" size="10" color="#999999"></uv-text>
					<uv-text v-else prefixIcon="download" :iconStyle="{color:'#00ff00'}" text="正在下载..." :lineHeight="20"
						size="10" color="#999999"></uv-text>
				</view>
				<view class="item-box ">
					<uv-text v-if="item.percentage==100" text="保存图片成功" :lineHeight="20" size="10"
						color="#999999"></uv-text>
					<uv-line-progress v-else :percentage="item.percentage" :showText="false" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "progress-bar",
		data() {
			return {
				downloadInfo: [],
			};
		},
		methods: {
			startDownload(index, percentage, total) {
				const flag = this.downloadInfo.findIndex(item => item.index === index);
				if (flag != -1) {
					this.downloadInfo[flag].percentage = percentage
				} else {
					this.downloadInfo.push({
						index,
						percentage
					})
				}
				if (this.downloadInfo.length === total && this.downloadInfo[total - 1]?.percentage === 100) {
					uni.showToast({
						title: "图片下载完毕",
						duration: 2000
					})
					setTimeout(() => {
						this.downloadInfo = []
					}, 2000)
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.downlaod-box {
		.download-item-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: start;
			margin: 5px 10px;

			.item-box {
				margin: 0 10px;
				width: 90px;
				line-height: 20px;
			}

			.image-index {
				width: 50px;
				border: 1px solid #00aaff;
				border-radius: 5px;
			}
		}
	}

	.actions-box {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
</style>